<!-- 为什么收入和支出的对话框不放到一起？一个原因是ts的类型比较麻烦。operatingItem将变成联合类型，
 每次使用type1和type2这些类型是都要做类型断言。但最主要的原因是支出的type2是需要随着type1更新的，
 因而需要使用watch语句，而watch语句会写在setup的根目录下，无法根据类型判断之后再开启针对支出类型的watch。
 固然可以使用函数进行watch的开启和关闭，但这样会增加很多额外的逻辑，和收支分开相比是否有明显的封装优势还不好说 -->
<template>
    <div>
        <el-dialog v-model="isShowUpdate" :title="dialogTitle" width="500">
            <el-form :model="operatingItem">
                <!-- calender -->
                <el-form-item label="日期" :label-width="formLabelWidth">
                    <el-date-picker v-model="operatingItem.time" type="date" placeholder="请选择日期" value-format="YYYY-MM-DD"  />
                </el-form-item>
                <!-- 选择器，支出一级分类 -->
                <el-form-item label="一级分类" :label-width="formLabelWidth">
                    <el-select v-model="operatingItem.typeKey1" id="type1" placeholder="一级分类"
                        style="width: 120px;margin-right:40px">
                        <el-option v-for="item in financeStore.expenseType" :key="item.id" :label="item.typeName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <!-- 选择器，支出二级分类 -->
                <el-form-item label="二级分类" :label-width="formLabelWidth">
                    <el-select v-model="operatingItem.typeKey2" id="type2" placeholder="二级分类"
                        style="width: 120px;margin-right:40px" :disabled="!(type2List&&type2List.length)">
                        <el-option v-for="item in type2List" :key="item.id" :label="item.typeName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <!-- 选择器 -->
                <el-form-item label="成员" :label-width="formLabelWidth">
                    <el-select v-model="operatingItem.member" id="member" placeholder="成员"
                        style="width: 120px;margin-right:40px">
                        <el-option v-for="item in memberStore.member" :key="item.id" :label="item.name"
                            :value="item.id" />
                    </el-select>
                </el-form-item>
                <!-- 数字输入框 -->
                <el-form-item label="金额" :label-width="formLabelWidth">
                    <el-input-number v-model="operatingItem.amount" autocomplete="off" />
                </el-form-item>
                <!-- 输入框 -->
                <el-form-item label="商家" :label-width="formLabelWidth">
                    <el-input v-model="operatingItem.beneficiary" autocomplete="off"/>
                </el-form-item>
                <!-- 文本域 -->
                <el-form-item label="描述" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="operatingItem.description" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancelOperation">取消</el-button>
                    <el-button type="primary" @click="confirmOperation">
                        确认
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { computed, watch, ref, onMounted } from 'vue'
import { ExpenseItemForInteraction,  SecondLvExpenseType } from '@/types/expense';
import useMemberStore from '@/store/modules/member';
import useFinanceStore from '@/store/modules/finance';
import { addExpense, modifyExpense } from '@/api/expense';
const financeStore = useFinanceStore()
const memberStore = useMemberStore()
const emit = defineEmits(['addElement'])

let isShowUpdate = defineModel<Boolean>('isShowUpdate')
let operatingItem = defineModel<ExpenseItemForInteraction>('operatingItem', {
    required:true
})
let dialogType = defineModel<Number>('dialogType')
let dialogTitle = computed(() => {
    return dialogType.value === 0 ? '新增收支数据' : '修改收支数据'
})
let type2List = ref<SecondLvExpenseType[]>([])
const updateType2List = () => {
    const typeKey1 = operatingItem.value.typeKey1
    type2List.value = []
    type2List.value = (financeStore.expenseType.find((obj) => obj.id === typeKey1)?.secondList as SecondLvExpenseType[])
    operatingItem.value.typeKey2 = null
}
// type2List不用computed，因为type2更新时需要operatingItem.value.typeKey2 = null
watch(() => operatingItem.value.typeKey1, updateType2List)
watch(isShowUpdate, () => {
    // 打开和关闭弹窗时要做的
    if (isShowUpdate) {
        const typeKey1 = operatingItem.value.typeKey1
        type2List.value = []
        type2List.value = (financeStore.expenseType.find((obj) => obj.id === typeKey1)?.secondList as SecondLvExpenseType[])
    } else {
        operatingItem.value = {
            id: 0,
            time: '',
            typeKey1: null,
            typeKey2: null,
            amount: 0,
            member: 0,
            beneficiary: '',
            description: ''
        }
    }
})
const cancelOperation = () => {
    isShowUpdate.value = false
}
const confirmOperation = async () => {
    if (dialogType.value === 0) {
        await addExpense(operatingItem.value)
    } else {
        await modifyExpense(operatingItem.value)
    }
    emit('addElement')
    isShowUpdate.value = false
}
const formLabelWidth = '140px'
onMounted(()=>{
    updateType2List()
})
</script>

<style scoped></style>